<template>
  <div class="">
    <el-dialog
      v-bind="$attrs"
      v-model="visible"
      title="数据导入"
      width="800"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 内容 -->
      <div min-h-300>
        <div mb-40 flex-x-center>
          <el-steps align-center w-full :active="active" finish-status="success">
            <el-step title="上传文件" />
            <el-step title="导入数据" />
            <el-step title="导入完成" :status="finishStatus" />
          </el-steps>
        </div>

        <!-- 第一步: 上传文件 -->
        <Step01UploadFile v-if="!isFinish" my-40 />
        <!-- 第三步: 导入完成 -->
        <Step03ImportFinish v-else />
      </div>
      <template #footer>
        <div class="dialog-footer flex-x-end">
          <el-button v-if="isFinish" type="primary" @click="onReUpload">重新上传</el-button>
          <el-button v-if="!isFinish" type="primary" @click="onNext">下一步</el-button>
          <!-- TODO: 成功才展示完成 -->
          <el-button v-if="isFinish" type="primary" @click="onFinish">完成</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import Step01UploadFile from './step01-upload-file.vue'
import Step03ImportFinish from './step03-import-finish.vue'

const visible = defineModel<boolean>('visible', { default: false })

// 当前步骤
const active = ref(0)
const finishStatus = ref<'success' | 'error' | 'wait'>('wait')
const isFinish = computed(() => active.value === 3)

// 下一步
const onNext = () => {
  finishStatus.value = 'error'
  active.value = 3
}

// 完成
const onFinish = () => {
  visible.value = false
}

// 重新上传
const onReUpload = () => {
  active.value = 0
  finishStatus.value = 'wait'
}
</script>
